<template>
  <el-dialog @close="reset" :title="cateData.id>0?'编辑':'新增'" :visible.sync="info.isShow">
    <el-form ref="cateForm" :model="cateData" label-width="80px" :rules="rules">
      <el-form-item label="上级分类" prop="pid">
        <el-select placeholder="请选择" v-model="cateData.pid">
          <el-option label="一级分类" :value="0"></el-option>
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="catename">
        <el-input
          placeholder="请输入分类名称"
          v-model="cateData.catename"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类图片" prop="img" v-if="cateData.pid > 0">
        <!-- 
            action: 图片上传接口地址  
            list-type: 上传组件的外观样式
            auto-upload: 是否自动上传图片
            limit: 最大允许上传个数
            on-exceed:文件超出个数限制时的钩子
          -->
        <el-upload
          :on-change="imgChange"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
          :on-exceed="limitTips"
          :file-list="imgList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="分类状态" prop="status">
        <el-radio-group v-model="cateData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入vuex辅助函数
import { mapState,mapActions } from "vuex";
export default {
  props: ["info"],
  computed: {
    ...mapState("cate", ["cateList"]),
  },
  data() {
    return {
        // 默认需要展示的图片列表
       imgList:[], 
      // 和表单进行绑定的数据对象
      cateData: {
        pid: "",
        catename: "",
        img: null,
        status: "",
      },
      //   定义表单校验规则
      rules: {
        pid: { required: true, message: "请选择上级分类", trigger: "blur" },
        catename: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur",
        },
        status: { required: true, message: "请选择分类状态", trigger: "blur" },
      },
    };
  },
  methods: {
      ...mapActions('cate',['getCateListAction']),
    // file: 系统自动注入的图片对象
    imgChange(file) {
      // 手动将图片的原始对象信息同步到img数据上
      this.cateData.img = file.raw;
    },
    // 图片数量超出限制的处理函数
    limitTips(){
        this.$message.warning('此处只能选择一张图片')
    },
    // 重置数据
    reset() {
        // 关闭对话框组件
        this.info.isShow=false;
        // 重置表单数据
        this.cateData={
            pid: "",
            catename: "",
            img: null,
            status: "",
        }
    },
    // 设置表单数据
    setFormData(obj){
        // 更新和表单进行绑定的数据
        this.cateData={...obj}
        // 更新默认需要展示的图片列表数据imgList
        this.imgList=obj.img!==''?[{url:this.$baseUrl+obj.img}]:[];
    },
    // 提交数据
    submit() {
        this.$refs.cateForm.validate(valid=>{
            if(valid){
                // 发送数据请求
                // this.cateData=>FormData
                // 创建FormData
                const fd=new FormData();
                for(let key in this.cateData){
                    fd.append(key,this.cateData[key]);
                }
                const url=this.cateData.id>0?'/cateedit':'/cateadd';
                this.$axios.post(url,fd).then(res=>{
                    if(res.code===200){
                        this.$message.success(res.msg);
                        // 重置数据
                        this.reset();
                        // 更新分类列表
                        this.getCateListAction();
                    }else{
                        this.$message.error(res.msg);
                    }
                });

            }
        })
    },
  },
};
</script>

<style>
</style>